<template>
    <main>
        <Banner></Banner>

        <Downloads></Downloads>

        <div class="why-need container">
            <div class="row">
                <div class="col-lg-6 why-need-left">
                    <h3>{{ $t('why_need_title') }}</h3>
                    <p>{{ $t('why_need_desc') }}</p>
                    <a href="/download" class="btn-outline">{{ $t('why_need_button') }}</a>
                </div>
                <div class="col-lg-6 why-need-right">
                    <div class="item" :style="{backgroundColor: item.color}" v-for="(item, key) in whyNeed" :key="key">
                        <img :src="item.icon" alt="feature">
                        <div class="des">{{ item.title }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container why-need-bottom">
            <ul class="social-brand-logo">
                <li v-for="(item, key) in whyNeedBottom" :key="key"><img :src="item.url"></li>
            </ul>
        </div>

        <section class="why-choose container" id="landing-feature"><h2>{{ $t('why_choose_title') }}</h2>
            <div class="why-choose-1 row landing-container why-choose-wrapper">
                <video autoplay="autoplay" muted="" loop="" class="col-lg-6">
                    <source :src="mp4Source" type="video/mp4">
                </video>
                <div class="why-choose-content col-lg-6"><h3>{{ $t('why_choose_1_li_title') }}</h3>
                    <p>
                        {{ $t('why_choose_1_li_desc') }}</p>
                    <a href="/download" class="ml-btn outline small"
                       event="Home Download Btn">{{ $t('why_choose_button') }}</a></div>
            </div>
            <div class="why-choose-2 row landing-container why-choose-wrapper">
                <div class="why-choose-content col-md-6"><h3>{{ $t('why_choose_2_li_title') }}</h3>
                    <p>
                        {{ $t('why_choose_2_li_desc') }}</p>
                    <a href="/download" class="ml-btn outline small"
                       event="Home Download Btn">{{ $t('why_choose_button') }}</a></div>
                <img class="col-6" :src="whyChoose.img_one"></div>
            <div class="why-choose-3 row landing-container why-choose-wrapper"><img class="col-6"
                                                                                    :src="whyChoose.img_two">
                <div class="why-choose-content col-md-6"><h3>{{ $t('why_choose_3_li_title') }}</h3>
                    <p>{{ $t('why_choose_3_li_desc') }}</p><a href="/download" class="ml-btn outline small"
                                                              event="Home Download Btn">{{ $t('why_choose_button') }}</a>
                </div>
            </div>
        </section>

        <GameHero></GameHero>

        <user-comment></user-comment>

        <section class="why-vip ml-wrapper">
            <div class="why-vip-wrappper">
                <div class="why-vip-left"></div>
                <div class="why-vip-right"></div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-5 free d-md-block d-none"><h3>{{ $t('why_vip_left_title') }}</h3>
                        <span>{{ $t('why_vip_left_desc') }}</span>
                        <a href="/signup" class="ml-btn solid large">{{ $t('why_vip_left_button') }}</a></div>
                    <div class="col-md-12 col-lg-7 vip"><h4>{{ $t('why_vip_right_title') }}</h4>
                        <ul class="vip-list">
                            <li><i class="ri-shield-flash-line"></i> <span>{{ $t('why_vip_right_li_1') }}</span></li>
                            <li><i class="ri-hd-line"></i> <span>{{ $t('why_vip_right_li_2') }}</span></li>
                            <li><i class="ri-magic-line"></i> <span>{{ $t('why_vip_right_li_3') }}</span></li>
                            <li><i class="ri-device-line"></i> <span>{{ $t('why_vip_right_li_4') }}</span></li>
                            <li><i class="ri-exchange-dollar-fill"></i> <span>{{ $t('why_vip_right_li_5') }}</span></li>
                            <li><i class="ri-chat-smile-3-line"></i> <span>{{ $t('why_vip_right_li_6') }}</span></li>
                        </ul>
                        <div class="vip-footer"><span>{{ $t('why_vip_right_desc') }}</span> <a href="/game"
                                                                                               class="btn-landing-solid">{{ $t('why_vip_right_button') }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
</template>

<script>

import Downloads from "@/components/Downloads";
import Banner from "@/components/Banner";
import UserComment from "@/components/UserComment";
import GameHero from "@/components/GameHero";

export default {
    name: 'Home',
    components: {GameHero, UserComment, Banner, Downloads},
    data() {
        return {
            whyNeed: [
                {
                    icon: require('@/assets/icon116_3.745e0.png'),
                    title: this.$t('why_need_li_1_title'),
                    color: '#C7EEFF'
                },
                {
                    icon: require('@/assets/icon116_1.0ba80.png'),
                    title: this.$t('why_need_li_2_title'),
                    color: '#D0D3FF'
                },
                {
                    icon: require('@/assets/icon116_1.0ba80.png'),
                    title: this.$t('why_need_li_3_title'),
                    color: '#FFDFDD'
                },
                {
                    icon: require('@/assets/icon116_4.2eb65.png'),
                    title: this.$t('why_need_li_4_title'),
                    color: '#FFEFDD'
                },
            ],
            whyNeedBottom: [
                {
                    url: require('@/assets/why_need_1.png')
                },
                {
                    url: require('@/assets/why_need_2.png')
                },
                {
                    url: require('@/assets/why_need_3.png')
                },
                {
                    url: require('@/assets/why_need_4.png')
                },
                {
                    url: require('@/assets/why_need_5.png')
                },
                {
                    url: require('@/assets/why_need_6.png')
                },
                {
                    url: require('@/assets/why_need_7.png')
                },
                {
                    url: require('@/assets/why_need_8.png')
                },
                {
                    url: require('@/assets/why_need_9.png')
                }
            ],
            mp4Source: require('@/assets/ScreenFlow.mp4'),
            whyChoose: {
                img_one: require('@/assets/feature_2.54873.png'),
                img_two: require('@/assets/feature_3.a6137.png')
            }
        }
    }
}
</script>

<style lang="scss">
@media (max-width: 768px) {
    .why-need {
        .why-need-left {
            h3 {
                font-size: 28px !important;
                text-align: center;
            }

            p {
                padding-right: 0 !important;
            }

            a {
                width: 100%;
                height: 44px;
            }
        }

        .why-need-right {
            margin-top: 56px !important;

            .item {
                flex-direction: column;
                height: auto !important;

                img {
                    width: 80px !important;
                }

                .des {
                    max-width: 100% !important;
                    font-size: 14px;
                    margin-left: 0;
                    margin-bottom: 16px;
                }
            }
        }
    }
    .why-choose {
        .why-choose-1 {
            video {
                width: 100% !important;
            }
        }

        .why-choose-content {
            width: 100%;
            align-items: center;
            margin: 0 !important;

            h3 {
                margin-top: 64px !important;
                text-align: center;
                line-height: 1.6;
                font-size: 24px !important;
            }
        }

        .why-choose-2 {
            flex-direction: column-reverse;
            margin-top: 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .why-choose-content {
                width: 100% !important;

                .row {
                    margin: 0;
                }
            }

            img {
                max-width: 100% !important;
            }
        }

        .why-choose-3 {
            img {
                max-width: 100% !important;
            }
        }
    }

    .why-vip {
        min-height: 400px !important;

        .container:before {
            display: none;
        }

        .container:after {
            display: none;
        }

        .vip {
            padding: 64px 24px 40px !important;
            background: #4D55E8;
        }

        .why-vip-left {
            width: 0 !important;
        }

        .why-vip-right {
            width: 100% !important;
        }

        .vip-list {
            margin-left: 0 !important;
            flex-wrap: wrap;

            li {
                align-items: center !important;
                justify-content: center;
                width: 30% !important;
                display: flex;
                flex-direction: column !important;
                margin-top: 24px;
            }
        }
    }
    .vip-footer {
        flex-direction: column;

        a {
            width: 100% !important;
            margin: 32px 0 24px;
        }
    }
}

main {
    .why-need {
        margin-top: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .why-need-left {
            h3 {
                font-size: 42px;
                color: #111;
                font-weight: 400;
                margin: -6px 0 0;
            }

            p {
                margin-top: 24px;
                font-size: 13px;
                color: #424242;
                line-height: 1.76;
                padding-right: 32px;
            }

            .btn-outline {
                margin-top: 32px;
                min-width: 200px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                height: 46px;
                border-radius: 4px;
                border: 1px solid #4d55e8;
                background: 0 0;
                padding: 0 24px;
                font-size: 12px;
                flex-shrink: 0;
                color: #4d55e8;
            }
        }

        .why-need-right {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 100%;

            .item {
                width: 48%;
                background: #D0D3FF;
                display: flex;
                align-items: center;
                margin-bottom: 24px;
                border-radius: 6px;
                height: 106px;
                box-shadow: 0 20px 20px rgb(0 0 0 / 3%);

                img {
                    width: 116px;
                    margin-left: 12px;
                }

                .des {
                    margin-left: 16px;
                    font-size: 22px;
                    max-width: 60px;
                    color: #333;
                    font-weight: 500;
                    line-height: 1.3;
                }
            }
        }
    }

    .why-need-bottom {
        overflow: hidden;
        max-width: 1140px !important;
        margin: 0 auto;

        .social-brand-logo {
            list-style: none;
            display: flex;
            margin-top: 64px;
            animation: 20s rowup linear infinite normal;
            padding-left: 0;

            li {
                margin-bottom: 24px;
                margin-right: 24px;

                img {
                    border-radius: 4px;
                    width: 166px;
                    box-shadow: 0 2px 24px rgb(0 0 0 / 6%);
                }
            }
        }
    }

    .why-choose {
        h2 {
            font-size: 42px;
            padding-top: 80px;
            display: block;
            text-align: center;
            font-weight: 400;
            color: #222;
            line-height: 1.5;
            margin: 0;
        }

        .why-choose-wrapper {
            margin-top: 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            video {
                width: 452px;
                object-fit: contain;
            }

            .why-choose-content {
                width: 560px;

                h3 {
                    font-size: 26px;
                    color: #333;
                    margin: 0;
                    font-weight: 500;
                }

                p {
                    margin-top: 32px;
                    font-size: 14px;
                    line-height: 1.76;
                    color: #7b7b7b;
                }

                .ml-btn.small {
                    margin-top: 32px;
                    height: 38px;
                    padding: 0 32px;
                    font-size: 14px;
                    color: #4D55E8;
                    font-weight: 500;
                    background: none;
                    border: 1px solid #4D55E8;
                }
            }
        }
    }

    .malus-user-comment {
        margin: 72px auto 0;
        background: #FBFBFF;
        padding: 72px 0 80px;

        h2 {
            font-size: 40px;
            font-weight: 400;
            color: #333;
            text-align: center;
            margin: 0;
            padding: 0;
        }

        span {
            display: block;
            text-align: center;
            color: #666;
            padding: 0 24px;
            line-height: 1.5;
            max-width: 900px;
            margin: 16px auto 0;
        }

        .malus-comment-wrapper {
            margin: 80px auto 0;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .malus-comment-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                background: #fff;
                box-shadow: 0 6px 24px rgb(0 0 0 / 9%);
                border-radius: 4px;
                padding: 24px;
                min-height: 240px;

                img {
                    width: 56px;
                    height: 56px;
                    border-radius: 50%;
                    margin-top: -52px;
                    border: 2px solid #fff;
                    box-shadow: 0 2.69px 6.72px rgb(0 0 0 / 12%);
                }

                span {
                    display: block;
                    font-size: 13px;
                    font-weight: 500;
                    margin-top: 16px;
                    color: #333;
                }

                p {
                    margin-top: 16px;
                    font-size: 14px;
                    color: #555;
                    line-height: 1.67;
                    -webkit-line-clamp: 4;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .buy-star {
                    margin-top: auto;
                    list-style: none;
                    padding: 0;
                    display: flex;

                    i {
                        font-size: 16px;
                        color: #ff960c;
                        margin-right: 6px;
                    }
                }
            }
        }

        .malus-more-comment {
            margin-top: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 13px;
            color: #4d55e8;
        }
    }

    .why-vip {
        background: #EFEFFF;
        position: relative;

        .why-vip-wrappper {
            justify-content: flex-start;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            z-index: 1;
            height: 400px;
            display: flex;
            align-items: center;

            .why-vip-left {
                width: 46%;
                display: flex;
                flex-direction: column;
            }

            .why-vip-right {
                width: 54%;
                min-height: 400px;
                border-radius: 0;
                background: #4D55E8;
                padding: 40px;
            }
        }

        .container {
            position: relative;
        }

        .container:before {
            height: 268px;
            background: url(../assets/before_review_top.480e9.png) no-repeat;
            background-size: cover;
            position: absolute;
            left: 0;
            right: 0;
            top: -100px;
            width: 1186px;
            animation: floatdown 6s ease-in-out infinite;
            content: "";
            z-index: 9;
            pointer-events: none;
        }

        .container:after {
            width: 74px;
            height: 70px;
            background: url(../assets/before_review_bottom.48fa6.png) no-repeat;
            background-size: cover;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            top: 302px;
            animation: floatup 6s ease-in-out infinite;
            content: "";
            z-index: 9;
            pointer-events: none;
        }

        .container {
            .row {
                position: relative;
                z-index: 2;
                min-height: 400px;
                align-items: center;

                .free {
                    h3 {
                        font-size: 32px;
                    }

                    span {
                        display: block;
                        margin-top: 24px;
                        color: #7B7B7B;
                    }

                    .ml-btn {
                        margin-top: 32px;
                        height: 50px;
                        padding: 0 46px;
                        font-weight: 500;
                        font-size: 16px;
                        background: #4D55E8;
                        color: #fff;

                    }
                }

                .vip {
                    padding-left: 108px;

                    h4 {
                        font-size: 32px;
                        font-weight: 400;
                        color: #fff;
                    }

                    .vip-list {
                        margin-top: 42px;
                        margin-left: -18px;
                        list-style: none;
                        padding: 0;
                        display: flex;
                        justify-content: space-between;

                        li {
                            width: 16%;
                            display: flex;
                            flex-direction: column;
                            align-items: center;

                            i {
                                background: rgba(252, 243, 221, .1);
                                font-size: 28px;
                                display: flex;
                                width: 48px;
                                height: 48px;
                                justify-content: center;
                                align-items: center;
                                border-radius: 50%;
                                color: #FFBE00;
                            }

                            span {
                                display: block;
                                font-size: 12px;
                                margin-top: 18px;
                                color: #fff;
                                text-align: center;
                            }
                        }
                    }

                    .vip-footer {
                        margin-top: 40px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        span {
                            font-size: 17px;
                            font-weight: 500;
                            color: #FFBE00;
                        }

                        .btn-landing-solid {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            height: 48px;
                            width: 200px;
                            border-radius: 4px;
                            color: #fff;
                            font-weight: 500;
                            background: #FFA329;
                            transition: all .2s ease;
                            font-size: 12px;
                        }
                    }
                }
            }
        }
    }
}

@keyframes rowup {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(-1140px, 0, 0);
    }
}

@keyframes rotation {
    from {
        -webkit-transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(359deg)
    }
}

@keyframes floatup {
    0%, 100% {
        transform: translatey(0)
    }
    50% {
        transform: translatey(-20px)
    }
}

@keyframes floatdown {

    0%, 100% {
        transform: translatey(0)
    }

    50% {
        transform: translatey(20px) rotate(1.5deg)
    }

}
</style>
